﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>折叠菜单</title>
		<link rel="stylesheet" href="collapsemenu.css" />
	</head>

	<body>
		<div id="fold">
			<ul>
				<li>
					<a href="#">信息管理</a>
					<ul class="wrap">
						<li>
							<a href="#">未读信息</a>
						</li>
						<li>
							<a href="#">已读信息</a>
						</li>
						<li>
							<a href="#">信息列表</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">商品管理</a>
					<ul class="wrap">
						<li>
							<a href="#">商品添加</a>
						</li>
						<li>
							<a href="#">商品列表</a>
						</li>
						<li>
							<a href="#">商品分类</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">用户管理</a>
					<ul class="wrap">
						<li>
							<a href="#">权限设置</a>
						</li>
						<li>
							<a href="#">用户列表</a>
						</li>
						<li>
							<a href="#">重置密码</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<script src="../ jquery-1.12.4.min.js"></script>
		<script>
			$('#fold ul li:first').find('.wrap').css('display', 'block');
			/*$('ul li:first .wrap').css('display', 'block');
						$('ul li').onclick = function() {
							$(this).find('.wrap').css('display', 'block');
							$(this).siblings('li').find('.wrap').css('display', 'none');
						}*/
			//jquery事件
			$('#fold ul li').click(
				function() {
					/*$(this).find('.wrap').css('display', 'block');*/
					$(this).siblings('li').find('.wrap').css('display', 'none');
					$(this).find('.wrap').slideToggle(1000);
				}
			)
		</script>
	</body>

</html>